<template>
  <el-row>
    <el-col :span="24" v-for="th in v" :key="Math.random().toString()">
      <th-item :value.sync="th"/>
    </el-col>
    <el-col :span="24" align-center>
      <el-button type="primary" size="mini" @click="addOne">新增一行</el-button>
      <el-button type="danger" size="mini" @click="delOne">删除一行</el-button>
      <el-select placeholder="导入已有模版" @change="handleChange" v-model="tplV" size="mini" style="margin-left: 10px;" clearable>
        <el-option
          v-for="item in tpl"
          :key="item.label"
          :label="item.label"
          :value="item.label">
        </el-option>
      </el-select>
    </el-col>
  </el-row>
</template>

<script>
import ThItem from "@/views/event/th/thItem.vue";

export default {
  name: "th-wrapper",
  components: {ThItem},
  props: {
    thnr: {
      type: Array,
      default() {
        return []
      },
    }
  },
  data() {
    return {
      tplV: '',
      tpl: []
    }
  },
  computed: {
    v: {
      get() {
        if (!this.thnr) {
          return []
        }
        return this.thnr;
      },
      set(newV) {
        this.$emit('update:thnr', newV)
      }
    }
  },
  mounted() {
    this.loadThTpl()
  },
  methods: {
    handleChange() {
      if(!this.tplV) this.v = []
      else {
        this.v = this.tpl.filter(d=>d.label === this.tplV)[0].value
      }
    },
    loadThTpl() {
      this.getConfigKey('th.tpl').then(res=> {
        this.tpl = eval(res.msg)
      });
    },
    addOne() {
      this.v.push({
        a: '',
        b: '',
      })
    },
    delOne() {
      this.v.pop()
    },
  }
}
</script>

<style scoped>

</style>
